<template>
    <div id="man-detail">
        <el-row :gutter="500">
            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>个人详情</span>
                    </div>
                    <div class="item_bock head_p">
                        <div class="text item">头像：</div>
                        <div class="head_img">
                            <img :src="userInfo.avatar"/>
                        </div>
                    </div>
                    <div class="item_bock head_text">
                        <div class="text item">
                            {{'昵称 ：' + userInfo.nickname}}
                        </div>
                    </div>
                    <div class="item_bock head_text">
                        <div class="text item">
                            {{'约会范围 ：' + userInfo.province + userInfo.city}}
                        </div>
                    </div>
                    <div class="item_bock head_text">
                        <div class="text item">
                            {{'性别 ：' + this.sex}}
                        </div>
                    </div>
                    <div class="item_bock head_text">
                        <div class="text item">
                            {{'年龄 ：' + userInfo.age}}
                        </div>
                    </div>
                    <div class="item_bock head_text">
                        <div class="text item">
                            {{'职业 ：' + userInfo.occupation}}
                        </div>
                    </div>
                    <div class="item_bock head_text">
                        <div class="text item">
                            {{'身份 ：' + this.identity}}
                        </div>
                    </div>
                    <div class="item_bock head_text">
                        <div class="text item">
                            {{'查看权限 ：' + this.checkLimit}}
                        </div>
                    </div>
                    <div class="item_bock head_text">
                        <div class="text item">
                            {{'身高 ：' + userInfo.height}}
                        </div>
                    </div>
                    <div class="item_bock head_text">
                        <div class="text item">
                            {{'体重 ：' + userInfo.weight}}
                        </div>
                    </div>
                    <div class="item_bock head_text">
                        <div class="text item">
                            {{'微信 ：' + userInfo.wechat}}
                        </div>
                    </div>
                    <div class="item_bock head_text">
                        <div class="text item">
                            {{'QQ ：' + userInfo.qq}}
                        </div>
                    </div>
                    <div class="item_bock head_text">
                        <div class="text item">
                            {{'账号状态 ：' + this.status}}
                            <el-button @click="onFreezeClick()" size="small" type="primary">冻结</el-button>
                            <el-button @click="onThawClick()" size="small" type="primary">解冻</el-button>
                        </div>
                    </div>
                    <div class="item_bock head_text">
                        <div class="text item">{{'个人介绍 ：'}}
                            <el-tag type="success" v-for="introduce in this.introduces" :key="introduce">{{introduce}}</el-tag>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
                <el-card class="box-card-img">
                    <div slot="header" class="clearfix">
                        <span>用户图库</span>
                    </div>
                    <div  class="ui-img-item" :key="index" v-for="(item,index) in photos" @click="onPreviewClick(item, index)">
                        <img class="ui-img-show" :src="item.url" />
                        <div class="ui-img-ban" v-show="item.status">
                            <p class="ui-ban-title">已封</p>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-dialog :visible.sync="dialogVisible">
            <img class="ui-img-preview" :src="imageUrl" alt="">
            <el-button @click="onBanImage()" size="small">封锁</el-button>
            <el-button @click="onCancleBanImage()" size="small">解封</el-button>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'man-detail',
    data () {
        return {
            dialogVisible: false,
            userInfo: {},
            photos: [],
            introduces: [],
            sex: '',
            limit: 0,
            imageUrl: '',
            image_ban_id: '',
            image_preview_index: '',
            identity: '',
            checkLimit: '',
            status: ''
        }
    },
    mounted () {
        this.getData(this.$route.params.id)
    },
    methods: {
        getData (id) {
            console.log(id)
            this.$api.user.userDetail({'id': id}, res => {
                if (res.code === 200) {
                    this.userInfo = res.data.user
                    let photoList = res.data.photos
                    this.introduces = this.userInfo.introduce.split(',')
                    this.sex = this.userInfo.sex === 0 ? '男' : '女'
                    this.identity = this.userInfo.identity === 1 ? '会员' : '非会员'
                    this.checkLimit = this.userInfo.checkLimit === 0 ? '公开' : '隐身'
                    this.status = this.userInfo.status ? '解冻' : '冻结'
                    this.limit = this.photos.length
                    for (let i = 0; i < photoList.length; i++) {
                        this.photos.push({
                            name: photoList[i].imagePath.substring(photoList[i].length - 12),
                            url: photoList[i].imagePath,
                            id: photoList[i].id,
                            status: photoList[i].status
                        })
                    }
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        onPreviewClick (item, index) {
            this.imageUrl = item.url
            // this.image_ban_id = item.url
            this.image_ban_id = item.id
            this.image_preview_index = index
            this.dialogVisible = true
        },
        onBanImage () {
            let _this = this
            this.$api.user.editPhotoStatus({'photoId': this.image_ban_id, 'status': 1}, res => {
                if (res.code === 200) {
                    _this.$set(_this.photos[_this.image_preview_index], 'status', true)
                    _this.$message.success(res.msg)
                } else {
                    _this.$message.error(res.msg)
                }
            })
        },
        onCancleBanImage () {
            let _this = this
            this.$api.user.editPhotoStatus({'photoId': this.image_ban_id, 'status': 0}, res => {
                if (res.code === 200) {
                    _this.dialogVisible = false
                    _this.$set(_this.photos[_this.image_preview_index], 'status', false)
                    _this.$message.success(res.msg)
                } else {
                    _this.$message.error(res.msg)
                }
                _this.dialogVisible = false
            })
        },
        onFreezeClick () {
            let params = {}
            params['id'] = this.$route.params.id
            params['status'] = false
            this.$api.user.userFreezeOrThaw({'params': params}, res => {
                if (res.code === 200) {
                    this.$message.success(res.msg)
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        onThawClick () {
            let params = {}
            params['id'] = this.$route.params.id
            params['status'] = true
            this.$api.user.userFreezeOrThaw({'params': params}, res => {
                if (res.code === 200) {
                    this.$message.success(res.msg)
                } else {
                    this.$message.error(res.msg)
                }
            })
        }
    }
}
</script>

<style lang = "less" scoped>
    #man-detail {
        .item_bock {
            display: flex;
            align-items: center;
            /*justify-content: space-between;*/
            height:94px;
            width: 400px;
            padding:0px 24px 0px 38px;
            background: #fff;
        }
        .head_p {
            height:90px;
        }
        .head_img{
            height: 90px;
        }
        .head_img img{
            width:90px;
            height:90px;
            border-radius:50px
        }
        .head_text {
            height: 50px
        }
        .setting_right{
            display: flex;
            height: 37px;
            justify-content: flex-end;
            align-items: center;
        }
        .hiddenInput{
            display: none;
        }
        .caption {
            color: #8F8F8F;
            font-size: 26px;
            height: 37px;
        }
        .text {
            font-size: 15px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 480px;
        }
        .box-card-img {
            width: 680px;
        }
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple {
            background: #d3dce6;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
        .ui-img-item{
            display: inline-block;
            position: relative;
            width: 120px;
            height: 120px;
            margin-top: 16px;
            margin-right: 16px;
        }
        .ui-img-show{
            display: block;
            width: 120px;
            height: 120px;
        }
        .ui-img-show:hover{
            width: 124px;
            height: 124px;
        }
        .ui-img-ban{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.5);
        }
        .ui-ban-title{
            width: 120px;
            line-height: 120px;
            font-size: 20px;
            color: #f00;
            font-weight: 600;
            text-align: center;
        }
        .ui-img-preview{
            display: block;
            width: 100%;
            height: 100%;
            margin-bottom: 20px;
        }
    }
</style>
